<template>
    <div class="cart" v-if="items.length">
        <p>购物车</p>
        <div class="cartMid" v-for="(item,index) in items" :key="item">
           <img :src="item.img" alt="img">
            <div class="itemDetail">
                <span>{{item.title}}</span>
                <van-stepper v-model="item.cartCount" @plus='cartCountPlus(item)' @minus='cartCountMinus(item,index)' theme="round" button-size="18" input-width='24px' disable-input min='0' />
            </div>
        </div>
        <div class="cartBottm">
            <van-button plain type="primary" @click="confirmOrder">提交订单</van-button>
            <van-button plain type="danger" @click="clearCart">清空购物车</van-button>
        </div>
    </div>
    <div v-else>
        <van-empty description="购物车为空" />
    </div>
</template>
<script lang="ts">
import {computed, defineComponent, getCurrentInstance, ref} from 'vue';
import { useStore } from 'vuex';
export default defineComponent({

    name:'cart',
    setup(){
        //vue3中获取store的方式
        const store = useStore()
        const {proxy}:any=getCurrentInstance()
        let items=ref(computed(()=>{
            return  store.state.cartArray;
        }))

        /**
         * item 要增加数量的的商品
         * store里面对 传入的商品数量进行增加
         */
        function cartCountPlus(item){
            
            store.commit('cartCountPlus',item);
        }
        /**
         * item 要减少数量的的商品
         * store里面对 传入的商品数量进行减少
         */
        function cartCountMinus(item,index){
            store.commit('cartCountMinus',[item,index]);
        }
        /**
         * 提交订单
         */
        function confirmOrder(){
            proxy.$toast.success('提交成功');
        }
        /**
         * 清空购物车
         */
        function clearCart(){
             store.commit('clearCart');
        }
        return{
            items,
            cartCountPlus,
            cartCountMinus,
            confirmOrder,
            clearCart
        }
    }

})
</script>
<style lang='scss' scoped>
.cart{
    margin-bottom: 50px;
.cartMid {
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 15px;
    margin-top: 10px;
    .itemDetail{
        
        padding: 10px 0px;
        height: 40px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    img{
    width: 120px;
    height: 80px;
}
   
}
::v-deep .van-button--normal{
    margin-right: 10px;
}
}


</style>